<template>
  <div class="vt-button">
    <template v-if="ele === 'nuxt-link'">
      <nuxt-link :to="to" :class="disable?'disabled': type" class="button-el">
        <slot></slot>
      </nuxt-link>
    </template>
    <template v-else-if="ele === 'a'">
      <a :href="url" :class="disable?'disabled': type" class="button-el">
        <slot></slot>
      </a>
    </template>
    <template v-else="ele === 'span'">
      <span :class="disable?'disabled': type" class="button-el">
        <slot></slot>
      </span>
    </template>
  </div>
</template>

<script>
  export default {
    props: {
      to: {
        type: [Object, String],
        default(){
          return ''
        }
      },
      url: {
        type: String,
        default() {
          return ''
        }
      },
      ele: {
        type: String,
        default() {
          return 'span'
        }
      },
      type: {
        type: String,
        default() {
          return ''
        }
      },
      disable: {
        type: Boolean,
        default() {
          return false
        }
      }
    }
  }
</script>

<style scoped lang="stylus">
@import "./index.styl"
</style>
